<template>
  <view class="content">
	<u-alert title="班组产量" center type = "info"></u-alert>
<!--    <view class="charts-box">
      <qiun-data-charts type="column"  :chartData="chartsDataColumn1" />
    </view> -->
	<view class="charts-box">
	  <qiun-data-charts type="pie" :chartData="chartsDataPie1"/>
	</view>
	<u-alert title="订单完成情况" center type = "info"></u-alert>
    <view class="charts-box">
      <qiun-data-charts type="bar" :opts="{xAxis:{max:40}}" :chartData="chartsDataColumn1"/>
    </view>	
</view>
<!-- 一个这种项目他们卖给客户多少钱，300w，jb就这个还有300w -->
	<!-- <u-alert title="基本条状图" center type = "info"></u-alert>
    <view class="charts-box">
      <qiun-data-charts type="bar" :opts="{xAxis:{max:40}}" :chartData="chartsDataColumn1"/>
    </view>

    <u-alert center type = "info" title="基本折线图"/>
    <view class="charts-box">
      <qiun-data-charts type="line" :chartData="chartsDataLine1"/>
    </view>

    <u-alert center type = "info" title="散点图"/>
    <view class="charts-box">
      <qiun-data-charts type="scatter" :chartData="chartsDataScatter" />
    </view>
    <u-alert center type = "info" title="气泡图"/>
    <view class="charts-box">
      <qiun-data-charts type="bubble" :chartData="chartsDataBubble" />
    </view>
    <u-alert center type = "info" title="多坐标系混合图"/>
    <view class="charts-box" style="height: 400px;">
      <qiun-data-charts type="mix" :opts="{yAxis:{data:[{position: 'left',title: '折线'},{position: 'right',min: 0,max: 200,title: '柱状图',textAlign: 'left'},{position: 'right',min: 0,max: 200,title: '点',textAlign: 'left'}]}}" :chartData="chartsDataMix1"/>
    </view>
    <u-alert center type = "info" title="基本饼状图"/>
    <view class="charts-box">
      <qiun-data-charts type="pie" :chartData="chartsDataPie1"/>
    </view>

    <u-alert center type = "info" title="圆弧进度条"/>
    <view class="charts-box">
      <qiun-data-charts type="arcbar" :opts="{title:{name:'80%',color:'#2fc25b',fontSize:35},subtitle:{name:'正确率',color:'#666666',fontSize:25}}" :chartData="chartsDataArcbar1"/>
    </view>

    <u-alert center type = "info" title="地图"/>
    <view class="charts-box" style="height: 400px;">
      <qiun-data-charts type="map" :opts="{extra:{map:{mercator:true}}}" :chartData="chartsDataMap1"/>
    </view>
  </view> -->
</template>

<script>
//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
import demodata from './mockdata/demodata.json';
import mapdata from './mockdata/mapdata.json'
import ucahrs from "@/api/fuzhuang/uchars.js"
import QiunDataCharts from "../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"

export default {
  components: {
    QiunDataCharts
  },
  data() {
    return {
      chartsDataColumn1:{},
      chartsDataColumn2:{},
      chartsDataColumn3:{},
      chartsDataColumn4:{},
      chartsDataColumn5:{},
      chartsDataColumn6:{},
      chartsDataLine1:{},
      chartsDataLine2:{},
      chartsDataLine3:{},
      chartsDataLine4:{},
      chartsDataLine5:{},
      chartsDataTLine:{},
      chartsDataScatter:{},
      chartsDataBubble:{},
      chartsDataArea1:{},
      chartsDataArea2:{},
      chartsDataMix1:{},
      chartsDataPie1:{},
      chartsDataRing1:{},
      chartsDataRose1:{},
      chartsDataRose2:{},
      chartsDataArcbar1:{},
      chartsDataArcbar2:{},
      chartsDataGauge1:{},
      chartsDataGauge2:{},
      chartsDataRadar1:{},
      chartsDataRadar2:{},
      chartsDataWord1:{},
      chartsDataFunnel1:{},
      chartsDataMap1:{},
      chartsDataCandle1:{},
      chartsDataMount:{}
    };
  },
  onReady() {
    //模拟从服务器获取数据
    this.getServerData()
  },
  methods: {
    getServerData() {
		ucahrs.getChars().then(data=>{
			this.chartsDataPie1=data.PieA
			this.chartsDataColumn1=data.Column
			console.log(data)
		})
      // setTimeout(() => {
      // 	//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
      // 	//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
      //   this.chartsDataColumn1=JSON.parse(JSON.stringify(demodata.Column))
      // 	this.chartsDataColumn2=JSON.parse(JSON.stringify(demodata.Column))
      // 	this.chartsDataColumn3=JSON.parse(JSON.stringify(demodata.Column))
      // 	this.chartsDataColumn4=JSON.parse(JSON.stringify(demodata.Column))
      //   this.chartsDataColumn5=JSON.parse(JSON.stringify(demodata.Column))
      //   this.chartsDataMount=JSON.parse(JSON.stringify(demodata.Mount))
      //   let tmpColumn6=JSON.parse(JSON.stringify(demodata.Column))
      //   tmpColumn6.series[1].data[2]={value:21,color:'#EE6666'}
      //   //注意，因为组件内监听了chartData，构造chartData的时候，一定要先定义一个临时变量，构造完成后统一赋值给chartData绑定的变量，否则会导致多次渲染图表
      // 	this.chartsDataColumn6=tmpColumn6
      // 	this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
      // 	this.chartsDataLine2=JSON.parse(JSON.stringify(demodata.Line))
      // 	this.chartsDataLine3=JSON.parse(JSON.stringify(demodata.Line))
      // 	this.chartsDataLine4=JSON.parse(JSON.stringify(demodata.Line))
      //   let tmpLine5=JSON.parse(JSON.stringify(demodata.Line))
      //   for (var i = 0; i < tmpLine5.series.length; i++) {
      //     tmpLine5.series[i].data[2]=null
      //   }
      //   tmpLine5.series[1].connectNulls=true
      //   this.chartsDataLine5=tmpLine5
      //   this.chartsDataTLine=JSON.parse(JSON.stringify(demodata.TLine))
      //   this.chartsDataScatter=JSON.parse(JSON.stringify(demodata.Scatter))
      //   this.chartsDataBubble=JSON.parse(JSON.stringify(demodata.Bubble))
      // 	this.chartsDataArea1=JSON.parse(JSON.stringify(demodata.Line))
      // 	this.chartsDataArea2=JSON.parse(JSON.stringify(demodata.Line))
      // 	this.chartsDataMix1=JSON.parse(JSON.stringify(demodata.Mix))
      // 	this.chartsDataPie1=JSON.parse(JSON.stringify(demodata.PieA))
      // 	this.chartsDataRing1=JSON.parse(JSON.stringify(demodata.PieA))
      // 	this.chartsDataRose1=JSON.parse(JSON.stringify(demodata.PieA))
      // 	this.chartsDataRose2=JSON.parse(JSON.stringify(demodata.PieA))
      // 	this.chartsDataArcbar1=JSON.parse(JSON.stringify(demodata.Arcbar1))
      // 	this.chartsDataArcbar2=JSON.parse(JSON.stringify(demodata.Arcbar2))
      // 	this.chartsDataGauge1=JSON.parse(JSON.stringify(demodata.Gauge))
      // 	this.chartsDataGauge2=JSON.parse(JSON.stringify(demodata.Gauge))
      // 	this.chartsDataRadar1=JSON.parse(JSON.stringify(demodata.Radar))
      // 	this.chartsDataRadar2=JSON.parse(JSON.stringify(demodata.Radar))
      // 	this.chartsDataWord1=JSON.parse(JSON.stringify(demodata.Word))
      // 	this.chartsDataFunnel1=JSON.parse(JSON.stringify(demodata.PieA))
      // 	this.chartsDataMap1={series:mapdata.features}
      // 	this.chartsDataCandle1=JSON.parse(JSON.stringify(demodata.Candle))
      // }, 1500);
    }
  }
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.charts-box {
  width: 100%;
  height: 300px;
}
</style>
